<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>视频监控在线支付</title>
	<link rel="stylesheet" href="css/main.css">

	<style>
		.center {
			width: 96%;
			margin-left: 2%;
		}

		.payment-info {
			text-align: center;
		}

		.payment-info table {
			width: 100%;
		}

		.payment-info table tr {
			width: 90%;
			height: 55px;
			font-size: 18px;
			line-height: 55px;
			margin-left: 5%;
		}

		.payment-info table tr td:nth-child(1) {
			text-align: left;
		}

		.payment-info table tr td:nth-child(2) {
			text-align: right;
		}

		button {
			width: 80%;
			color: white;
			height: 60px;
			font-size: 20px;
			margin-left: 10%;
			margin-top: 15px;
			border-radius: 5px;
			text-align: center;
			position: absolute;
			line-height: 60px;
		}

		button:nth-child(1) {
			background: #95d195;
			bottom: calc(3% + 80px);
		}

		button:nth-child(2) {
			background: #108ee9;
			bottom: 3%;
		}

		[v-if] {
			display: none;
		}
	</style>
</head>

<body>
	<div class="header">
		<div class="header_title">在线支付</div>
		<img src="image/return.png" alt="返回" class="return" onclick="history.back()">
	</div>
	<div class="contain header-after" id="vue-root">
		<div class="center" v-if="show">
			<div class="payment-info">
				<table>
					<tr>
						<td>订单名称:</td>
						<td>{{name}}视频监控</td>
					</tr>
					<tr>
						<td>有效时长:</td>
						<td>{{duration}}天内</td>
					</tr>
					<tr>
						<td>支付金额:</td>
						<td>{{fee/100}}元</td>
					</tr>
				</table>
			</div>
			<div>
				<button @click="wxpay">微信支付</button>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="js/wxpay.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				name: '',
				fee: 0,
				duration: 0,
				show: false
			},
			created: function () {
				axios.get('/s/live/fee/' + params().id).then(function (res) {
					this.fee = res.data.fee;
					this.duration = res.data.duration;
					this.show = true;
				}.bind(this));
			},
			methods: {
				wxpay: function () {
					axios.get('/s/wxpay', {
						params: {
							type: 2,
							id: params().id
						}
					}).then(wxPay(function () {
						alert('支付成功');
						history.back();
					}));
				}
			}
		});

	</script>


</body>

</html>